import IconFont from "@/components/IconFont";
import { Dropdown, Menu } from "@arco-design/web-react";
import { IconMoreVertical } from "@arco-design/web-react/icon";
import { useState } from "react";

const dropList = (
  <Menu>
    <Menu.Item key="1">完成</Menu.Item>
    <Menu.Item key="2">删除</Menu.Item>
  </Menu>
);

export default function TodoListComp() {
  const [hoverId, sethoverId] = useState("");
  const todoList = [
    {
      id: "1",
      title: "任务1",
      completed: false,
      startTime: "7:00",
      endTime: "9:00",
    },
    {
      id: "2",
      title: "任务2",
      completed: true,
      startTime: "7:00",
      endTime: "9:00",
    },
  ];

  const icon = () => {
    return (
      <IconFont
        style={{
          fontSize: "55px",
        }}
        type="icon-daiban"
      />
    );
  };

  return (
    <div>
      {todoList.map((todo) => (
        <div
          key={todo.id}
          onMouseEnter={() => sethoverId(todo.id)}
          onMouseLeave={() => sethoverId("")}
          className="flex px-4 transition-all items-center hover:bg-gray-50 cursor-pointer"
        >
          <span> {icon()}</span>
          <div className="flex justify-between w-full items-center">
            <div>
              <span> {todo.title}</span>
              <div className="text-gray-500 text-xs mt-1">
                <span>{todo.startTime}</span>
                <span>-</span>
                <span>{todo.endTime}</span>
              </div>
            </div>
            {hoverId === todo.id && (
              <Dropdown trigger="click" droplist={dropList}>
                <div className="text-gray-400 transition-colors hover:text-gray-800">
                  <IconMoreVertical
                    style={{
                      fontSize: "20px",
                    }}
                  />
                </div>
              </Dropdown>
            )}
          </div>
        </div>
      ))}
    </div>
  );
}
